<template>
  <view class="md-item-class-component" @click="turnVideo(classInfo)">
    <image v-if="classInfo.cover" :src="`https://www.aikoolearn.com/video-dev${classInfo.cover}`" alt="">
		<view class="right">
			<p class="status">{{ rendertime() }}</p>
			<p class="title ellipsis2">{{ classInfo.name }}</p>
			<p class="one"><image style="width: 12px; height: 12px;" src="/static/img/fire.png" alt=""> <span > 最近在学 {{
			  classInfo.applyNum }}人</span> <span class="goLive" @click="golive"> {{ title }}</span> </p>
		</view>
 
  </view>
</template>
<script>
export default {
  props: {
    classInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      title:'马上看'
    }
  },
  computed: {
    isLogin() {
      return window.localStorage.getItem('isLogin')
    },
    userInfo() {
      return JSON.parse(window.localStorage.getItem('userInfo'))
    }
  },
  methods: {
    golive() {

    },
    rendertime() {
      let nowtimeS = new Date().getTime()
      let startTime = new Date(this.classInfo.liveStartTime).getTime()
      let endtime = new Date(this.classInfo.liveEndTime).getTime()

      if(nowtimeS <startTime){
        this.title = '去预约'
        return  this.classInfo.liveStartTime+ '开课'
      }else if(nowtimeS>startTime && nowtimeS<endtime){
        return  '直播中'
      }else{
        return  '已开播'
      }

    },
    turnVideo(item) {
		uni.navigateTo({
			url: '/pages/recording/liveVideo?classInfo='+JSON.stringify(this.classInfo)
		})
    //   if (this.isLogin) {
    //      uni.navigateTo({
    //      	url: '/pages/recording/liveVideo?classInfo='+JSON.stringify(this.classInfo)
    //      })
    //   } else {
		  // uni.showToast({
		  // 	title: '未登录',
		  // 	icon: 'error',
		  // 	duration: 500
		  // });
		  
    //    }
    }
  }
}
</script>
<style lang="less" scoped>
.md-item-class-component {
  position: relative;
  width: 100%;
  margin: 0 0 19.084rpx 0;
  border-radius: 15.267rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding : 10.7rpx;

  &:hover {
    transform: translateY(-2px);

  }

  image {
	width: 150px;
	height: 100px;
    background: no-repeat center/cover;
    // margin-bottom: 5px;
    border-radius: 8px ;
    overflow: hidden;
	flex-shrink: 0;
	
  }

  .title {
    width: 200px;
    color: #000000;
	font-size: 15px;
    font-weight: 500;
    margin-top: 8px;
    padding: 0 8px;

  
  }
  
  .right{
height: 100px;
  }

  .status {
    color: #999999;
	font-size: 14px;
    padding-left: 12px;
    margin: 0;
  }

  .ellipsis2 {
    white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
  }

  .one {
   position: absolute;
   bottom: 15.267rpx;
	width: 200px;
	font-size: 12px;
    color: #9199a1;
    padding: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 32px;
    display: flex;
    align-items: center
  }

  .two {
    font-size: 22.901rpx;
    color: #9199a1;
    line-height: 34.351rpx;
    padding: 0 8px;
    margin-bottom: 15.267rpx;
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .goLive {
    width: 80px;
    line-height: 32px;
    background-color: #0FB09B;
border-radius: 17px;
	font-size: 16px;
    text-align: center;
    color: #fff;
    display: inline-block;
    position: absolute;
    right: 19.084rpx;
  }

}
</style>